<script>
// <!-- 小说详情 -->
import {
  getdetails,
  getcomment,
  getcatalogue,
  getRepliesData,
} from "../api/details";
import { useRouter } from "vue-router";
import { reactive, toRefs } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { Toast } from "vant";

// import { ref } from 'vue';

export default {
  setup() {
    const list = reactive({
      emid: 0,
      lists: null, //详情数据
      commentlist: null, //评论数据
      cataloguelist: null, //目录
      flag: true, //排序
      show: false, //显示隐藏目录
      Collectionflag: false, //收藏
      replies: null, //展开评论
      btn_index: 0,
      groupId:0,
      historylist: "",
      Unlocklist: [], //购买章节数组
      Readingarr: null, //阅读记录数组
      Readingname: null, //阅读章节名字
      Readingfalg: false, //阅读章节显示隐藏
    });

    //接受路由传参
    const router = useRouter();
    list.emid = router.currentRoute._value.query.id;

    // 初始化数据
    onMounted(() => {
      //历史阅历
      if (window.localStorage.getItem("history") == null) {
        window.localStorage.setItem("history", "[]");
      }
      //解锁章节  Unlock
      if (window.localStorage.getItem("Unlock") == null) {
        window.localStorage.setItem("Unlock", "[]");
      }
      //解锁章节初始化
      let Unlock = window.localStorage.getItem("Unlock");
      list.Unlocklist = JSON.parse(Unlock);

      //阅读记录
      if (window.localStorage.getItem("Reading") == null) {
        window.localStorage.setItem("Reading", "[]");
      }
      let Reading = window.localStorage.getItem("Reading");
      list.Readingarr = JSON.parse(Reading);
      if (list.Readingarr.length > 0) {
        list.Readingarr.forEach((item) => {
          if (item.bookId == list.emid) {
            list.Readingfalg = true;
            list.Readingname = item;
          }
        });
      }

      // 评论数据
      getcomment(list.emid).then((data) => {
        list.commentlist = data.data[2].comment;
        // let pinlist = JSON.parse(localStorage.getItem('commens'))
        // if (pinlist && pinlist.length) {
        //   // for (let i = 0; i < list.commentlist.data.length; i++) {
        //   //   for (let j = 0 + i; j < pinlist.length; j++) {
        //   //       if (list.commentlist.data[i].id == pinlist[j].emid) {
        //   //         list.commentlist.data[i].replyCount+=1
        //   //       }
        //   //   }  
        //   // }

        // }else{
        // }
         let praise = JSON.parse(localStorage.getItem('praise'))
      if (praise && praise.length) {
        console.log(praise);
        for (let i = 0; i < list.commentlist.data.length; i++) {
            for (let j = 0; j < praise.length; j++) {
              if (list.commentlist.data[i].id == praise[j].id && list.emid == praise[j].emid && praise[j].platform == 1)  {
                console.log(i);
                 list.commentlist.data[i].platform = 1
                list.commentlist.data[i].praiseCount += 1
              } else {
                list.commentlist.data[i].praiseCount;
                list.commentlist.data[i].platform
              }
            }
          }
      }else{
                  list.commentlist

      }


        console.log(list.commentlist.data, "评论");
      });

      // 详情数据
      getdetails(list.emid).then((data) => {
        // console.log(data.data, "初始化数据");
        list.lists = data.data;
        //历史数组存储
        list.historylist = data.data[0];
      });

      getcatalogue(list.emid).then((data) => {
        list.cataloguelist = [];
        // console.log(data.data.volumes);
        for (let i = 0; i < data.data.volumes.length; i++) {
          for (let j = 0; j < data.data.volumes[i].chapters.length; j++) {
            list.cataloguelist.push(data.data.volumes[i].chapters[j]);
          }
        }
        // console.log(list.cataloguelist, "目录");
      });

      getRepliesData(list.emid, list.emid).then((data) => {
        list.replies = data;
        // console.log("展开评论详情", list.replies);
      });
   
  
   });

    //初始化书架状态
    let Colltype = JSON.parse(localStorage.getItem("Collection"));
    if (Colltype && Colltype.length) {
      let index = Colltype.filter((item) => item.id == list.emid);
      if (index.length) {
        list.Collectionflag = true;
      } else {
        list.Collectionflag = false;
      }
    } else {
      list.Collectionflag = false;
    }

    let routeReplies = (repliesIndex) => {
      let str = [];
      let groupId = [];
      list.commentlist.data.forEach((item, index) => {
        console.log(item.groupId);
        console.log(item.shareUrl);
        if (index == repliesIndex) {
          str = item.shareUrl.split("?")[1].split("&")[0].split("=")[1];
          console.log(str);
          groupId = item.groupId;
        }
      });
      router.push("/replies?id=" + str + "&groupId=" + groupId);
      // console.log(list.commentlist.data[0]);
    };
    //过滤器
    let getFilter = (value) => {
      if (value < 10000) {
        return value;
      }
      let w = value > 10000 ? value / 10000 : value; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万";
      return y;
    };

    //切换显示隐藏目录
    const showPopup = () => {
      list.show = !list.show;
      console.log(111);
      list.Unlocklist.forEach((item) => {
        if (item.bookId == list.emid) {
          list.cataloguelist.forEach((ele) => {
            if (ele.chapterId == item.ChapterId) {
              ele.isVIP.id = 0;
            }
          });
        }
      });
    };

    //排序
    let sortFun = () => {
      Toast.success("切换成功");
      if (list.flag) {
        list.cataloguelist = list.cataloguelist.reverse();
        list.flag = !list.flag;
      } else {
        list.cataloguelist = list.cataloguelist.reverse();
        list.flag = !list.flag;
      }
      console.log(list.cataloguelist);
    };

    // 添加书架
    let CollectionFun = (k) => {
      if (k == 1) {
        Toast.success("添加收藏成功");
        list.Collectionflag = true;
        let Colllist = JSON.parse(localStorage.getItem("Collection"));
        console.log(Colllist);

        if (Colllist && Colllist.length) {
          Colllist.push({
            id: list.emid,
            img: list.lists[0].bookTop.coverImg,
            name: list.lists[0].bookTop.bookName,
            // chapter:list.lists[0].bookTop.,
            author: list.lists[0].bookTop.authorPenName,
            checked: false,
          });

          localStorage.setItem("Collection", JSON.stringify(Colllist));
        } else {
          let data = [];
          data.push({
            id: list.emid,
            img: list.lists[0].bookTop.coverImg,
            name: list.lists[0].bookTop.bookName,
            author: list.lists[0].bookTop.authorPenName,
            checked: false,
          });
          localStorage.setItem("Collection", JSON.stringify(data));
        }
      } else {
        Toast.fail("已经添加入收藏了");
      }
    };

    // 切换目录
    let btnFun = (id) => {
      Toast.success("点击目录阅读");
      router.push(
        "/novel?id=" + list.emid + "&ye=" + list.cataloguelist[id].chapterId
      );
    };
    // 开始阅读
    let navigateFun = () => {
      let history = window.localStorage.getItem("history");
      history = JSON.parse(history);
      console.log(history, "添加前");
      if (history.length > 0) {
        history = history.filter((item) => {
          return item.bookTop.bookId != list.historylist.bookTop.bookId;
        });
      }
      console.log(history, "去重后");
      history.push(list.historylist);
      console.log(history, "添加后");
      history = JSON.stringify(history);

      window.localStorage.setItem("history", history);

      Toast.success("点击阅读");
      if (list.Readingfalg == true) {
        router.push(
          "/novel?id=" + list.emid + "&ye=" + list.Readingname.chapterId
        );
      } else {
        router.push(
          "/novel?id=" +
            list.emid +
            "&ye=" +
            list.cataloguelist[list.btn_index].chapterId
        );
      }
    };
    //回到上一页
    let golist = () => {
      console.log(1);
      router.go(-1);
    };
    // 点赞
    let commentFun = (id)=>{
      if (list.commentlist.data[id].platform == 0) {
        list.commentlist.data[id].platform = 1
        list.commentlist.data[id].praiseCount += 1
      }else if (list.commentlist.data[id].platform == 1) {
        list.commentlist.data[id].praiseCount -= 1
        list.commentlist.data[id].platform =0 
      }
      list.commentlist.data[id].emid = list.emid
      let praiseCoun = JSON.parse(localStorage.getItem("praise"));
      if (praiseCoun) {
        praiseCoun.push(list.commentlist.data[id])
         for (let i = 0; i < praiseCoun.length; i++) {
          for (let j = i + 1; j < praiseCoun.length; j++) {
            if (praiseCoun[i].id == praiseCoun[j].id && praiseCoun[i].emid == praiseCoun[j].emid) {
              praiseCoun[i].platform = praiseCoun[j].platform
              praiseCoun.splice(j, 1);
            }
          }
        }
        localStorage.setItem("praise", JSON.stringify(praiseCoun));
      }else{
        localStorage.setItem("praise", JSON.stringify([list.commentlist.data[id]]));
      }
    }
    return {
      commentFun,
      ...toRefs(list),
      getFilter,
      navigateFun,
      showPopup,
      sortFun,
      CollectionFun,
      history,
      routeReplies,
      btnFun,
      golist,
    };
  },
};
</script>

<template>
  <div class="details" v-if="lists">
    <div class="top_box">
      <div class="top_navbar">
        <div class="back_l">
            <span
              @click="$router.go(-1)"
              class="iconfont icon-zuojiantou-copy"
            ></span>
        </div>
        <div class="search_r">
          <span class="iconfont icon-bangzhu"></span>
        </div>
      </div>

      <div class="novel_main">
        <router-link
          custom
          v-slot="{ href, navigate }"
          :to="'/authorView?authorID=' + lists[0].bookTop.authorId"
        >
          <div @click="navigate" :href="href" class="book_box">
            <div class="book_l">
              <h3>{{ lists[0].bookTop.bookName }}</h3>

              <p>{{ lists[0].bookTop.authorPenName }}</p>
              <div class="text_box">
                <p>
                  {{ lists[0].bookTop.bookStatus.name }} |
                  {{ getFilter(lists[0].bookTop.wordCount) }}字
                </p>
                <p class="text">
                  {{ lists[0].bookTop.bookCategory.name }} |
                  {{ lists[0].bookTop.bookChannel.name }}
                </p>
              </div>
              <!-- <div class="score">8.6 <span>分</span></div> -->
            </div>
            <div class="book_r">
              <img :src="lists[0].bookTop.coverImg" alt="" />
            </div>
          </div>
        </router-link>
        <div class="line"></div>
        <div class="label_box">
          <div class="item">
            <span>{{ getFilter(lists[0].bookTop.countInfo.pv) }}</span>
            <p>阅读过</p>
          </div>
          <div class="item">
            <span>{{ getFilter(lists[0].bookTop.countInfo.giftCount) }}</span>
            <p>打赏 (次)</p>
          </div>
          <div class="item">
            <span>{{
              getFilter(lists[0].bookTop.countInfo.recommentTicket)
            }}</span>
            <p>推荐 (票)</p>
          </div>
        </div>
      </div>

      <!-- <div class="vip_box">
        <router-link custom to="/member" v-slot="{ href, navigate }">
          <div class="open_vip" :href="href" @click="navigate">
            <div class="vip_l">
              <img src="../assets/img/aly.png" alt="" />
              <p>开通会员 | 此书免费看</p>
            </div>
            <div class="vip_r">
              <span class="iconfont icon-youjiantou-copy"></span>
            </div>
          </div>
        </router-link>
      </div> -->
    </div>
    <!-- 简介 -->
    <div class="introduce_box">
      <p>{{ lists[0].bookTop.introduction }}</p>
    </div>
    <div class="catalogue" is-link @click="showPopup">
      <h5>目录</h5>
      <span>{{ lists[0].bookTop.lastUpdateChapter.name }}</span
      ><i class="iconfont icon-youjiantou-copy"></i>
    </div>
    <!-- 评论 -->
    <div class="comments_box" v-if="commentlist">
      <div class="title">
        <p>最热书评</p>
        <router-link
          custom
          :to="'/morecom?id=' + emid+'&num='+commentlist.totalNum+'&groupId='+commentlist.groupId"
          v-slot="{ href, navigate }"
        >
          <span :href="href" @click="navigate" class="commensPopup"
            ><span class="iconfont icon-bianxie"></span>写评论</span
          >
        </router-link>
      </div>
      <div
        class="comments"
        v-for="(item, index) in commentlist.data"
        :key="item.id"
      >
        <div class="user_box">
          <div class="avatar">
            <img :src="item.userInfo.avatarUrl" alt="" />
          </div>
          <div class="name">
            <p>{{ item.userInfo.nickname }}</p>
            <div>
              <span v-if="item.userInfo.vipLevel"
                >VIP{{ item.userInfo.vipLevel }}</span
              >
              <a
                v-if="item.userInfo.fansLevel !== -1"
                :style="
                  item.userInfo.vipLevel >= 4
                    ? 'background-color: #f9d466;'
                    : ''
                "
                ><b
                  :style="
                    item.userInfo.vipLevel >= 4
                      ? 'background-color: #f9d466;'
                      : ''
                  "
                  >{{ item.userInfo.fansLevel }}</b
                >
                <li v-if="item.userInfo.vipLevel == 0">见习</li>
                <li v-if="item.userInfo.vipLevel == 1">学徒</li>
                <li v-if="item.userInfo.vipLevel == 2">弟子</li>
                <li v-if="item.userInfo.vipLevel == 3">执事</li>
                <li v-if="item.userInfo.vipLevel >= 4" style="color: #7e5014">
                  舵主
                </li>
              </a>
            </div>
          </div>
        </div>
        <p class="write-p">{{ item.summary }}</p>
        <div class="left">
          <p></p>
          <div class="right">
            <div class="num" @click="routeReplies(index)">
              <span class="iconfont icon-xiaoxi"></span> {{ item.replyCount }}
            </div>
            <div :class="item.platform == 1 ? 'num con':'num'" @click="commentFun(index)">
              <span class="iconfont icon-dianzan"></span> {{ item.praiseCount }}
            </div>
          </div>
        </div>
      </div>
      <router-link
        custom
        :to="'/morecom?id=' + emid+'&num='+commentlist.totalNum+'&groupId='+commentlist.groupId"
        v-slot="{ href, navigate }"
      >
        <p :href="href" @click="navigate" class="more">
          查看更多评论 ({{ commentlist.totalNum }})
        </p>
      </router-link>
    </div>
    <!-- 开始阅读 -->
    <div class="reader_box">
      <div class="reader" @click="CollectionFun(1)" v-show="!Collectionflag">
        <i class="iconfont icon-star"></i> 加入书架
      </div>
      <div
        class="reader readerA"
        @click="CollectionFun(2)"
        v-show="Collectionflag"
      >
        <i class="iconfont icon-star"></i> 已加入书架
      </div>
      <div class="reader1" @click="navigateFun" v-if="!Readingfalg">
        开始阅读
      </div>
      <div class="reader1 read" @click="navigateFun" v-if="Readingfalg">
        继续阅读 {{ Readingname.name }}
      </div>
    </div>

    <!-- 目录 -->
    <van-popup v-model:show="show" position="left" :style="{ height: '100%' }">
      <main>
        <div class="top">
          <i
            is-link
            @click="showPopup"
            class="iconfont icon-zuojiantou-copy"
          ></i>
          <span>目录</span>
          <i @click="sortFun" class="iconfont icon-paixu"></i>
        </div>
        <ul>
          <li
            @click="btnFun(index)"
            class="con"
            v-for="(item, index) in cataloguelist"
            :key="index"
          >
            <span :class="1 == item.subscribe ? 'active' : ''">{{
              item.chapterName
            }}</span>
            <i
              :class="['iconfont', 'icon-lock', { con: item.isVIP.id == 0 }]"
            ></i>
          </li>
        </ul>
      </main>
    </van-popup>
  </div>
</template>



<style lang="scss" scoped>
.con {
  display: none;
}
.details {
  padding-bottom: 73px;
  background-color: #f8f9fa;

  main {
    padding: 0 15px;
    position: relative;
    .top {
      top: 0px;
      position: sticky;
      background-color: #fff;
      padding: 13px 0 22px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: 14px;
        color: #00ba8a;
      }
    }
    ul {
      li {
        color: #bbb9b9;
        padding: 10px 0;
        display: flex;
        align-items: center;
        font-size: 13px;
        justify-content: space-between;
        i {
          font-size: 14px;
          padding-left: 30px;
        }
        .active {
          color: #00ba8a;
        }
      }
      .con {
        color: #333;
      }
    }
  }

  .top_box {
    background-color: #665857;
    .top_navbar {
      padding: 0 16px;
      color: #fefaf9;
      height: 45px;
      display: flex;
      position: sticky;
      top: 0;
      align-items: center;
      justify-content: space-between;
      .iconfont {
        font-size: 22px;
      }
    }
    .novel_main {
      padding: 0 16px;

      .book_box {
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px;
        .book_l {
          position: relative;
          // flex: 1;
          h3 {
            font-size: 22px;
            color: #fefdfd;
            margin: 12px 0;
            font-weight: 500;
            padding-right: 25px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          p {
            color: #fefdfd;
            font-size: 14px;
            padding: 4px 0;
          }
          .text_box {
            p {
              color: #cac2bf;
              font-size: 12px;
              padding: 0;
              padding-top: 6px;
            }
          }
          .score {
            position: absolute;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            font-size: 20px;
            padding-right: 10px;
            color: #ff8139;
            span {
              font-size: 12px;
              color: #d2c3c3;
              padding-left: 2px;
            }
          }
        }
        .book_r {
          margin-top: 5px;
          // flex: 1;
          height: 120px;
          img {
            //   width: 110px;
            height: 100%;
            border: 1px solid #4a3b38;
            border-radius: 6px;
          }
        }
      }
      .line {
        width: 100%;
        height: 2px;
        background-color: #706261;
      }
      .label_box {
        padding: 10px 0;
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
        .item {
          color: #e8e4e1;
          display: flex;
          flex-direction: column;
          align-items: center;
          .iconfont {
            font-size: 25px;
          }
          p {
            font-size: 15px;
            text-align: center;
          }
        }
      }
    }
    .vip_box {
      padding: 20px 16px;
      background-color: #fff;
      border-radius: 10px 10px 0 0;
      .open_vip {
        display: flex;
        align-items: center;
        justify-content: space-between;
        // height: 50px;
        padding: 0 16px;
        border: 1px solid #919191;
        border-radius: 9px;
        padding: 12px 20px;
        background-image: linear-gradient(to right, #3d3d3d, #1f1f1f);
        .vip_l {
          display: flex;
          img {
            height: 21px;
            margin-right: 8px;
          }
          p {
            color: #dfd1a7;
          }
        }
        .vip_r {
          background: #dfd1a7;
          border-radius: 50%;
          width: 19px;
          height: 19px;
          text-align: center;
          .iconfont {
            font-size: 12px;
            color: #000;
            font-weight: 600;
          }
        }
      }
    }
  }
  .catalogue {
    margin-top: 10px;
    padding: 10px 15px;
    display: flex;
    background-color: #fff;
    justify-content: space-between;
    span {
      font-size: 14px;
      color: #665857;
    }
    i {
      color: #676768;
    }
  }
  .introduce_box {
    margin-top: 10px;
    padding: 20px 16px;
    background-color: #fff;
    p {
      font-size: 15px;
      color: #676768;
      text-indent: 25px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
    }
  }
  .comments_box {
    padding: 12px 16px;
    // height: 200px;
    background-color: #fff;
    margin-top: 10px;
    .title {
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #000;
      .commensPopup {
        color: #00c290;
        font-size: 13px;
        .iconfont {
          margin-right: 5px;
        }
      }
    }
    .comments {
      padding: 20px 0 10px;
      border-bottom: 1px solid #ccc;
      .user_box {
        display: flex;
        .avatar {
          //   width: 40px;
          height: 40px;
          img {
            height: 100%;
            border-radius: 50%;
          }
        }
        .name {
          margin-left: 10px;
          p {
            font-size: 13px;
            color: #77757f;
            margin-left: 4px;
          }
          div {
            display: flex;
            align-items: center;
            span {
              padding: 1.2px 4px;
              font-size: 6px;
              color: #7e5014;
              background-color: #f9d466;
              border-radius: 5px 0 5px 0;
              transform: scale(0.8);
            }
            a {
              transform: scale(0.8);
              border-radius: 5px 0 5px 0;
              overflow: hidden;
              font-size: 6px;
              color: #7e5014;
              background-color: #b4ccff;
              color: #5a78a8;
              padding-right: 4px;
              display: flex;
              b {
                padding: 1px 2px;
                font-size: 6px;
                font-weight: normal;
                margin-right: 2px;
                color: #fff;
                background-color: #87a1d2;
              }
            }
          }
        }
      }
      .write-p {
        padding: 15px 0 0;
        margin-bottom: 10px;
        font-size: 14px;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .left {
        display: flex;
        align-items: center;
        justify-content: space-between;
        p {
          font-size: 12px;
          color: #b6b4ba;
          font-weight: 300;
        }
        .right {
          display: flex;
          .num {
            display: flex;
            align-items: center;
            font-size: 11px;
            color: #b6b4ba;
            align-items: flex-end
          }
          .con{
            color: #00ba8a;
          }
          .iconfont {
            font-size: 17px;
          }
          .iconfont:last-child {
            margin:0 5px 0 20px;

          }
        }
      }
    }
    .more {
      font-size: 14px;
      padding: 5px 0;
      color: #38ba93;
      text-align: center;
    }
  }
  .reader_box {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: #fff;
    padding: 10px 15px;
    .reader {
      width: 30%;
      padding: 8px 0;
      color: #666;
      background-color: #fff;
      font-size: 14px;
      border-radius: 6px;
      text-align: center;
      border: 1px solid #a5ddd5;
      margin-right: 20px;
    }
    .readerA {
      color: rgb(148, 220, 137);
    }
    .reader1 {
      padding: 8px 0;
      color: #fff;
      background-color: #36c5a8;
      font-size: 17px;
      border-radius: 6px;
      text-align: center;
      border: 1px solid #a5ddd5;
      flex: 1;
    }
  }
}
::v-deep {
  .title {
    .van-overlay {
      background: #ffffffab;
    }
    .van-popup {
      width: 60%;
      border: 1px solid #ddd;
      background-color: #f8f9fa;

      // height: 100px;
      border-radius: 10px;
      overflow: hidden;
      box-sizing: border-box;
      textarea {
        box-sizing: border-box;
        line-height: 20px;
        padding: 10px;
        font-weight: 500;
        color: #000;
        font-size: 14px;
        text-indent: 2em;
        background-color: #f8f9fa;
        width: 100%;
        height: 125px;
        outline: none;
        resize: none;
        border: none;
      }
    }
  }
}
.read {
  font-size: 14px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 15px !important;
  line-height: 35px;
}
</style>